<template>
  <div class="signV2">
    <div class="sign-header">
      <div class="back"></div>
      <!--<div class="logo" style="background-image: url(&quot;/esign/static/logo_kjq_1.png&quot;);"></div>-->
      <a id="downloadA" class="downloadA" style="opacity: 0;"></a>
      <div class="sub-btn-list"><!----> <!----> <!----> <!----></div>
      <div class="main-btn-list"><!---->
        <button type="button" @click="refuse" class="el-button main-btn white-btn el-button--default"><!---->
          <!----><span>拒绝签署</span></button>
        <button @click="toNext" type="button" class="el-button main-btn red-btn el-button--default"><!----><!----><span>提交签署</span>
        </button> <!----> <!----> <!----> <!----></div>
    </div>
    <div class="sign-container">
      <div class="es-sign-page" ref="esSignPage" style="background: #efefef;overflow: auto">
        <div class="es-pdf-header" :style="{'left':showLeft?'280px':'40px','right':showRight?'280px':'0'}">
          <div role="slider" style="display: none" aria-valuemin="0.5" aria-valuemax="3" aria-orientation="horizontal" class="el-slider"
               aria-valuetext="1" aria-label="slider between 0.5 and 3"><!---->
            <div class="el-slider__runway">
              <div class="el-slider__bar" style="left: 0%; width: 20%;"></div>
              <div tabindex="0" class="el-slider__button-wrapper" style="left: 20%;">
                <div class="el-tooltip el-slider__button" aria-describedby="el-tooltip-1786" tabindex="0"></div>
              </div><!----><!----></div>
          </div>
          <span style="display: none" class="es-pdf-header__slider"> 100%</span> <span class="es-pdf-header--jump"><div
          class="es-pdf-header--jump__page el-input-number el-input-number--mini is-without-controls"><!----><!----><div
          class="el-input el-input--mini"><!---->
          <input type="number" max="6" min="1" v-model="pageNum"  >
          <!----><!----><!----><!----></div></div> <span>/ 6</span>
          <button type="button" @click="jump" class="el-button es-pdf-header--jump__btn el-button--default el-button--mini"><!---->
          <!----><span>跳转</span></button></span></div>
        <div class="es-sign-page__box" style="position: relative;z-index:99;overflow: initial">

          <div class="es-pdf-container">
            <div class="es-pdf-view">
              <div class="es-pdf-view__load" style="display: none;"><i class="el-icon-loading"></i>
                <p class="es-pdf-view__load--field">文档加载...</p></div> <!---->
              <div class="es-pdf-block__placeholder-top" style="width: 595px; height: 0px;"></div>
              <div id="page_0" class="es-pdf-page" style="width: 700px"><!---->
                <div class="img-box" id="img-box" ref="imgBox">
                  <img class="pageImg" :src="require('../assets/img/'+item+'.png')" v-for="(item,index) in imgNum" :ref="'imgSize'+index" @onload="getImg">
                  <!--<img class="pageImg" src="../assets/img/2.png">-->
                  <!--<img class="pageImg" src="../assets/img/3.png">-->
                  <!--<img class="pageImg" src="../assets/img/4.png">-->
                  <!--<img class="pageImg" src="../assets/img/5.png">-->
                  <!--<img class="pageImg" src="../assets/img/6.png">-->
                  <template v-for="(item,index) in signArr" v-key="index">
                    <VueDragResize :isActive="true"
                                   @dragging="dragStart($event,index)"
                                   @dragstop="dragEnd($event,index)"

                                   :parentLimitation="item.pLimitp"
                                   :isResizable="false" :w="118" :h="140" :x="item.x" :y="item.y" :parentW="700" :style="{opacity:item.opa}">
                      <div class="sign-img-box" style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;border: 1px dashed #ccc;">
                        <img class="sign-img" :src="item.url" style="width: 80px;height: 80px;cursor: move" />
                        <div class="sign-edit" v-show="item.showEdit" style="position: absolute;left: 0;bottom: -24px;width: 100%">
                          <p><i class="el-icon-edit" @click="codeBox=true"></i></p>
                          <p><i class="el-icon-delete" @click.stop="hideThis(index)"></i></p>
                        </div>
                      </div>
                    </VueDragResize>
                  </template>
                </div>
                <div id="edge_0" class="es-pdf-page__edges" style="width: 0px; height: 842px;"></div> <!----> <!---->
              </div>
              <div class="es-pdf-block__placeholder-bottom" style="width: 595px; height: 0px;"></div> <!----></div>
            <div class="es-sign-page__point-wrapper">
              <div class="es-position-point__wrapper" style="height: 0px;">
                <div class="es-position-point"><!---->
                  <div class="es-position-point__scroller" style="height: 0px;">
                    <div class="es-position-point__content"></div>
                  </div> <!----></div>
              </div>
            </div>
            <div class="es-seal-placeholder"></div> <!---->  </div>

          <button type="button" style="display: none" class="el-button es-sign-page__switch-btn el-button--default">
            <!---->
            <!----><span>骑缝签章</span></button>
        </div>
        <div>
          <div class="sign-doc-list-tab" :style="{'width':showLeft?'280px':'40px'}">
            <div class="doc-list-tab">
              <div @click="tabItem=1" :class="[tabItem==1?'sign-doc-active':'','tab-item sign-doc']">
                <div :class="[tabItem==1?'tag-show':'','tab-choose-tag ']"></div>
              </div>
              <div @click="tabItem=2" :class="[tabItem==2?'attachment-doc-active':'','tab-item attachment-doc']">
                <div :class="[tabItem==2 ?'tag-show':'','tab-choose-tag ']"
                     style="background-color: rgb(255, 255, 255);"></div>
              </div>
              <div class="consult"><span>在线客服</span></div>
            </div>
            <div class="doc-list-context" v-if="tabItem==1">
              <div class="doc-list-title">
                文件
                <span>（1份）</span></div>
              <div class="doc-list">
                <div class="doc-item">
                  <div class="doc-img doc-img-active">
                    <img alt="" src="../assets/img/1.png">
                    <div class="doc-page-num">2</div> <!----> <!----> <!----></div>
                  <div class="doc-name">劳动合同.pdf</div>
                </div>
              </div>
            </div>
            <div data-v-6bc40067="" v-if="tabItem==2" class="doc-list-context attachment-context" initiatordoclist=""
                 hastwopart="">
              <div data-v-6bc40067="" class="doc-list-title">
                附属材料
                <span data-v-6bc40067="">（0份）</span></div> <!---->
              <div data-v-6bc40067="" class="doc-list">
                <div data-v-6bc40067="" class="empty-list-context">
                  暂无附件<!----></div>
              </div> <!----></div>
            <div class="open-close-trigger" @click="showLeft=!showLeft"  :style="{'left':showLeft?'242px':'0'}"></div>
            <div class="open-close-trigger-icon" @click="showLeft=!showLeft" :style="{'left':showLeft?'278px':'40px','transform':showLeft?'rotate(0deg)':'rotate(180deg)'}" ></div>
          </div>
        </div>
        <div>
          <div :class="[showRight?'sign-seal-flow-tab':'sign-seal-flow-tab panel-close']" element-loading-text="数据加载..." element-loading-spinner="el-icon-loading"
               element-loading-background="rgba(255, 255, 255, 1)">
            <div class="tab-bar">
              <div class="tab-bar-item tab-bar-item-active">
                我的印章
                <span></span></div> <!---->
              <div class="tab-bar-item" style="display: none">
                任务信息
                <span></span></div>
            </div>
            <div class="tab-context">
              <div class="sign-seal-list">
                <div class="sign-seal-list-wrapper">
                  <div class="fast-seal" style="display: none;"><label class="el-checkbox fast-check is-checked"><span
                    class="el-checkbox__input is-checked"><span class="el-checkbox__inner"></span><input type="checkbox"
                                                                                                         aria-hidden="false"
                                                                                                         class="el-checkbox__original"
                                                                                                         value=""></span>
                    <!----></label> <span>一键批量落章</span> <span class="el-tooltip fast-tip item"
                                                              aria-describedby="el-tooltip-4709" tabindex="0"></span>
                  </div>
                  <div class="seal-list">
                    <div class="seal-item-wrapper">
                      <div class="seal-wrapper-title">
                        个人印章
                      </div>
                      <div class="seal-wrapper-item">
                        <div class="seal-box">
                          <div class="org-seal-status"></div>
                          <div class="es-drag-seal"
                               style="position: absolute; opacity: 0.4; z-index: 2; touch-action: none;">
                            <div class="seal-list-item seal-list-item-hand"></div>
                          </div>
                          <div class="es-drag-seal">
                            <div class="seal-list-item seal-list-item-hand"></div>
                          </div>
                        </div> <!---->
                        <VueDragResize v-if="!codeBox" :isResizable="false"
                                       :x="handSignX" :y="handSignY" :z="999"
                                       @dragstop="handSignFn"
                        >
                          <div class="seal-box">
                            <div class="org-seal-status"></div>
                            <div class="es-drag-seal"
                                 style="position: absolute; opacity: 0.4; z-index: 2; touch-action: none;">
                              <div class="seal-list-item seal-list-item-hand"></div>
                            </div>
                            <div class="es-drag-seal">
                              <div class="seal-list-item seal-list-item-hand"></div>
                            </div>
                          </div>
                        </VueDragResize>
                        <!--<VueDragResize  :isResizable="false"-->
                                        <!--:x="prevX" :y="prevY" :z="999"-->
                                        <!--@dragging="prevAddSignFn($event)"-->
                                        <!--@dragstop="checkSignIsInImg($event)"-->
                        <!--&gt;-->
                          <!--<div class="seal-box" id="hiddenSealBox"  style="position: relative;">-->
                            <!--<div class="org-seal-status">&lt;!&ndash;&ndash;&gt;</div>-->
                            <!--<div class="es-drag-seal"-->
                                 <!--style="position: absolute; opacity: 0; z-index: 2; touch-action: none;">-->
                              <!--<div class="seal-list-item signBg"></div>-->
                            <!--</div>-->
                            <!--<div class="es-drag-seal">-->
                              <!--<div class="seal-list-item signBg"></div>-->
                            <!--</div>-->
                            <!--<span class="seal-list-alias"></span>-->
                          <!--</div>-->
                        <!--</VueDragResize>-->
                        <div class="seal-box" style="position: initial" ref="sealbox">

                          <div class="org-seal-status"><!----></div>
                          <div class="es-drag-seal"
                               style="position: absolute; opacity: 0; z-index: 2; touch-action: none;">
                            <div class="seal-list-item signBg"></div>
                          </div>
                          <div class="es-drag-seal">
                            <div class="seal-list-item signBg"></div>
                          </div>
                          <span class="seal-list-alias"></span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="seal-list-alias-tip" style="display: none;"></div>
              </div> <!----> <!----></div>
            <div class="open-close-trigger" @click="showRight = !showRight"  :style="{'right':showRight?'242px':'-36px'}"></div>
            <div class="open-close-trigger-icon" @click="showRight = !showRight" :style="{'right':showRight?'277px':'0px','transform':showRight?'rotate(180deg)':'rotate(0deg)'}"></div> <!---->
            <div class="el-loading-mask" style="background-color: rgb(255, 255, 255); display: none;">
              <div class="el-loading-spinner"><i class="el-icon-loading"></i>
                <p class="el-loading-text">数据加载...</p></div>
            </div>
          </div>
        </div> <!---->
      </div>
    </div>



    <div class="es-sign-page__stick">
      <span>
        <img
      src=""
      class="toTop" @click="prevImg">
        <img
      src=""
      class="toBottom" @click="nextImg">
      </span>
    </div>
    <el-dialog
      title="拒签原因"
      :visible.sync="dialogVisible"
      :modal-append-to-body='false'
      width="400">
      <el-input
        type="textarea"
        :rows="4"
        placeholder="请输入拒绝签署本文件的原因"
        v-model="textarea">
      </el-input>
      <p v-show="noReason" style="font-size: 12px;color: red;text-align: left;margin-top: 4px">请输入拒签原因</p>
      <span slot="footer" class="dialog-footer">
        <el-button style="background: #fff;line-height: 6px!important;" @click="dialogVisible = false"
                   plain>取 消</el-button>
        <el-button type="primary" style="line-height: 6px!important;" @click="sureRefuse">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="手绘印章"
      :visible.sync="codeBox"
      :modal-append-to-body='false'
      width="500px">
      <div class="code-tip">
        <p class="code-tip-tit">请打开手机扫一扫下方二维码，5分钟内有效</p>
        <img class="code-tip-img" src="../assets/code.png" alt="">
        <p class="code-tip-desc">提醒：通过二维码功能签署的签名，即表示我同意将该签名作为我的正式签名用于我（或我的代理）的各种文件处理用途，包括具有法律约束力的合约，与用笔在纸上签名具有相同效力。</p>
      </div>
    </el-dialog>
    <div class="mask-new" v-if="showNew"></div>
    <div class="dialog-new" v-if="showNew">
      <img src="../assets/dialog-new.png"/>
      <p>你有以下电子文件待签署，电子文件与纸质文件具有同等法律效力，请务必仔细阅读和理解文件内容。</p>
      <el-button size="mini" @click="showNew=false" style="background-color: rgb(230, 23, 23);color: #fff">确定</el-button>
    </div>
  </div>
</template>
<script>
  import VueDragResize from 'vue-drag-resize';
  import imageUrl from '../assets/sign.png'

  export default {
    name: '',
    components: {
      VueDragResize
    },
    data() {
      return {
        pageNum:1,
        signArr: [
          {
            url: imageUrl,
            x: 0,
            y: 0,
            showEdit: false,
            pLimitp:false,
            opa:0
          }
        ],
        backgroundImageUrl: imageUrl,
        tabItem: 1,
        dialogVisible: false,
        textarea: '',
        noReason: false,
        codeBox: false,
        imgHei:[],
        imgNum:[1,2,3,4,5,6],
        now:0,
        showPrevSignFlag:false,
        prevX:0,
        prevY:0,
        imageUrl:imageUrl,
        showNew:true,
        fullWidth:0,
        initX:0,
        initY:0,
        signBoxScrollTop:0,
        showLeft:true,
        showRight:true,
        handSignX:19,
        handSignY:78
      }
    },
    mounted() {
      // this.getImg();
      // this.$nextTick(function () {
      //   let that = this;
      //   $('.pageImg').each(function (el, val) {
      //     let $that = $(this)
      //     console.log($that.offset().top)
      //     that.imgHei.push($that.offset().top)
      //   })
      // })

      this.initPos();
      this.$refs.esSignPage.addEventListener("scroll", this.debounceScroll);
    },
    watch:{
      now(newVal){
        this.pageNum = newVal+1
      }
    },
    created() {
      this.prevX = 147
      this.prevY = 78
    },
    methods: {
      handSignFn(){
        this.codeBox = true;
        this.handSignX = 19;
        this.handSignY = 78;
      },
      debounceScroll(){
        this.signBoxScrollTop = this.$refs.esSignPage.scrollTop;
        this.signArr[this.signArr.length-1].y = this.initY + this.signBoxScrollTop;
        this.now = parseInt(this.signBoxScrollTop/990)
        console.log(this.now)
        // console.log(this.$refs.esSignPage.scrollTop)
      },
      initPos(){
        this.fullWidth = document.documentElement.clientWidth;
        let pos01 = this.$refs.sealbox.getBoundingClientRect().left
        let pos02 = this.$refs.imgBox.getBoundingClientRect().left
        this.initX = this.signArr[0].x = this.fullWidth-pos02-(this.fullWidth-pos01)
        this.initY = this.signArr[0].y = this.$refs.sealbox.getBoundingClientRect().top-this.$refs.imgBox.getBoundingClientRect().top
      },
      getItemE(e){
        console.log(e)
        this.opa = 1;
//        console.log(this.signArr[0].x,this.signArr[0].y)
      },
      addChild(index){
        let that = this;
        console.log()
        if(!this.signArr[index].opa){
          this.signArr[index].opa = 1;
          let obj = {
            url: imageUrl,
            x: that.initX,
            y: that.initY +that.signBoxScrollTop,
            showEdit: false,
            parentLimitation:false,
            opa:0
          }
          that.signArr = that.signArr.concat(obj);
        }
        console.log(this.signArr)
      },
      dragStart(e,index){
        // console.log(e)
        this.addChild(index)
        this.signArr[index].opa = 1;
        this.signArr[index].x = e.left;
        this.signArr[index].y = e.top;
      },
      dragEnd(e,index){
        console.log(e,index)
        let that = this;
        // if(this.signArr[index].opa){}

        if(e.left>582){
          that.signArr.splice(index, 1);
          this.$message.error('请将印章拖拽至签章区！')
          // this.signArr[index].opa = 0;
        }else{
          // that.signArr[index].pLimitp = true;

        }
        console.log(that.signArr)
      },
      // getPos(that){
      //   that.prevX = that.$refs.sealbox.getBoundingClientRect().left;
      //   that.prevY = that.$refs.sealbox.getBoundingClientRect().top;
      //   console.log(that.$refs.sealbox.getBoundingClientRect().top)
      //   console.log(that.$refs.sealbox.getBoundingClientRect().left)
      // },
      prevAddSignFn(e){
         console.log(e)
        // console.log($('#hiddenSealBox').offset().top)
        // console.log($('#hiddenSealBox').offset().left)
//        this.prevX = e.clientX;
//        this.prevY = e.clientY;
        // this.showPrevSignFlag = true;
        // console.log(this.showPrevSignFlag);
      },
      checkSignIsInImg(e){
        console.log(this.prevX)
        // this.showPrevSignFlag = false;
        // console.log(this.showPrevSignFlag);
      },
      getImg(){
        let that = this;
        for (let i=0;i<this.imgNum.length;i++){
          console.log(this.$refs['imgSize'+i])
          // that.$nextTick(function () {
          //   console.log(this.$refs['imgSize'+i][0].offsetHeight)
          // })

        }
      },
      jump(){
        this.now = this.pageNum-1;
        $('.es-sign-page').scrollTop(990*[this.now])
      },
      prevImg(){
        console.log(this.now)
        let that = this;
        if(this.now==0){
          return false
        }else {
          that.now--;
          $('.es-sign-page').scrollTop(990*[this.now])
        }
      },
      nextImg(){
        console.log(this.now)
        // console.log($('.es-sign-page__box'))
        // $('.es-sign-page__box').scrollTop(200)
        let that = this;
        if(this.now>5){
          return false
        }else {
          that.now++;
          $('.es-sign-page').scrollTop(990*[that.now])
        }
      },
      showEditFn(item) {
        console.log(1)
      },
      hideThis(idx) {
        this.signArr.splice(idx, 1)
        // console.log(this.signArr)
      },
      sureRefuse() {
        if (!this.textarea) {
          this.noReason = true
        } else {
          this.dialogVisible = false;
          this.$router.push({path: '/refusesuccess'})
        }
      },
      refuse() {
        this.noReason = false;
        this.dialogVisible = true;
      },
      toNext() {
        this.$router.push({path: '/yiyuan'})
      },
      addSignArr() {
        console.log($('.img-box').offset().top)
        let arrItem = [
          {
            url: this.backgroundImageUrl,
            x: 300,
            y: 300 - $('.img-box').offset().top,
            showEdit: false
          }
        ];
        this.signArr = this.signArr.concat(arrItem);
      }
    }
  }
</script>
<style scoped>

  @import "../assets/css/index.css";
  @import "../assets/css/vendor1.css";
  @import "../assets/css/app.css";
  .mask-new{
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 9999;
    background: rgba(0,0,0,0.5);
    top: 0;
    left: 0;
  }
  .dialog-new{
    width: 500px;
    position: fixed;
    top: 20vh;
    left: 50%;
    margin-left: -250px;
    z-index: 10000;
    background-color: #fff;
    padding-bottom: 20px;
  }
  .dialog-new img{
    display: block;
    width: 100%;
  }
  .dialog-new p{
    margin: 0px auto;
    padding: 24px 77px;
    width: 100%;
    text-align: center;
    color: rgb(51, 51, 51);
    line-height: 20px;
    font-size: 14px;
  }
  .dialog-new button{
    /*margin-top: 30px;*/
    width: 80px;
    border-radius: 5px;
  }
  .signV2 {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }

  .img-box {
    width: 100%;
    position: relative;
  }

  .img-box img {
    display: block;
    width: 100%;
  }

  .signBg {
    background-image: url("../assets/sign.png");
  }

  .empty-list-context[data-v-6bc40067] {
    color: #999;
    text-align: center;
    font-size: 14px;
    background-image: url();
    background-repeat: no-repeat;
    background-position: 50%;
    height: 160px;
    padding-top: 126px;
  }


  .sign-edit {
    display: none;
    width: 102px;
  }

  .vdr.active:hover .sign-edit {
    display: block !important;
  }

  .sign-edit p {
    width: 50%;
    float: left;
    text-align: center;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    height: 24px;
    line-height: 24px;
  }

  .code-tip-tit {
    font-size: 18px;
    color: #000;
  }

  .code-tip-img {
    width: 200px;
    margin: 20px 0;
  }

  .code-tip-desc {
    text-align: left;
    font-size: 14px;
    color: #333;
    line-height: 24px;
  }
  .es-pdf-container{
    background-image: none!important;
  }
  .sign-seal-list{
    width: auto;
  }
  .sign-doc-list-tab .open-close-trigger{
    z-index: 1000;
  }
  .sign-doc-list-tab .open-close-trigger:before{
    z-index: 1001!important;
  }
  .sign-doc-list-tab .open-close-trigger-icon{
    z-index: 1001!important;
  }
  .sign-header .main-btn-list button span{
    /*line-height: 6px;*/
    font-size: 16px;
  }
  .sign-header .main-btn-list button{
    padding: 0;
  }
</style>
